前言

接續前一篇講到 Hugo Configuration，今天來聊聊筆者自己在配置時的經驗；當我在摸索 hugo config 參數設置的過程中，有時會陷入不確定怎麼做才對的迷霧裡，此時就會需要多花時間耐心理解，今天會從我有改動過的 config 設置的部分，聊聊改動原因、用途，以及遇到的問題。

Config 參數

本節會介紹下列幾個筆者設置過的 Conig 參數：

• baseURL 網站網址
• permalinks 文章網址格式
• picture 頭像圖片
• menu 清單
• params 文章 Cover Image
  • thumbnailImage 是否啟用文章圖片 (佈景提供)
  • thumbnailImagePosition 文章圖片相對位置 (佈景提供)
  • autoThumbnailImage 是否啟用抓取預設圖片 (佈景提供)
• params 其他設置
  • dateFormat 文章副標題內的時間格式
  • clearReading 點「繼續閱讀」是否要自動關閉清單
  • coverImage 設置網站背景圖 (佈景提供)
  • favicon 瀏覽器 Tab 上的小圖示 (佈景提供)

baseURL

當你將網站部署到雲端後，獲取你的公開網址，配置到以下這個參數：

# 以 GitHub Pages 為例
baseURL = "https://your-github-username.github.io/"

這個設置不影響你在本地運行，只會影響你部署到雲端後，公開瀏覽的結果，若設置錯誤，網站就會異常，甚至暫時消失。

permalinks

Hugo 提供你自訂每篇文章的網址，請先看以下定義：

post = "/:year/:month/:slug/"

在每篇文章的 Front Matter 裡，若你有自訂的 slug 時，該篇文章會使用你定義的文字作為網址，例如：

https://your-baseurl.io/2020/09/your-slug

若是你配置 :slug 但 Front Matter 卻沒給 slug 設置時，預設會使用 title 替代 slug；這邊也建議一開始先決定好「網址風格」，利如都用簡單的英文拼湊，或是完整英文描述，甚至使用中文都可以，不然等到文章一多想要改就會比較辛苦一點，且也會影響到 Google Search 結果。

picture

選定你想要設置的頭像圖片，放到 site root 底下的 static/images 底下，然後透過以下設置方式讀圖：

picture = "images/avatars.png"

你也可以指定圖片完整的網址，但切記圖檔不要太大，會跑很慢。

menu

筆者使用的佈景有運用到 menu 設置的相關參數，若你想要把清單佈局比例調小一點，可以把側邊欄改成次寬的寬度：

sidebarBehavior = 2

另外若你想讓清單選項只留下一排 (預設顯示是兩排)，並把所有 menu.xxx 都改為 menu.main ，感覺就會更簡潔；以下是筆者其中一個選單設置：

[[menu.main]]
  weight = 1            # 清單會根據 weight 做排序
  identifier = "home"   # 頁面的唯一識別符，若有使用多語系會根據這個去查找翻譯；若有重複的 identifier 會以 weight 高的優先，另一個會消失
  name = "Home"         # 選單 Title 名稱，如果沒有設置 identifier 連結文字會預設使用 name 
  url = "/"             # 指定網址

params 文章 Cover Image

• thumbnailImage：是否啟用文章縮圖，false: 隱藏，true: 啟用
• thumbnailImagePosition：首頁文章列表中，縮圖與標題的相對位置
• autoThumbnailImage：沒設置縮圖時，預設使用 cover image (或是文章中的第一張圖)

在此筆者啟用了文章縮圖，放在標題的左側，並且不給縮圖路徑 (若要另外指定縮圖可在文章 Front Matter 中設定 thumbnailImage)，渲染文章時預設就會套用 cover image 作為文章縮圖。

做出首頁有預覽縮圖，點開文章有展開大圖的效果。

點繼續閱讀展開文章：

params 其他設置

dateFormat = "2006-01-02 15:04:05 UTC+8"

定義文章顯示的 時間格式，這邊筆者踩了個新手坑，原來定義格式的 數值 是不能亂給的，說白點就是你不能改他的 1月2日3點4分5秒06年 (你可以試試看亂給個 11 月，時間會整個跑掉)，這是因為 golang 時間格式剖析器有其設計的深意，好奇的朋友可以參考這篇 --- Golang神奇的2006-01-02 15:04:05。

clearReading

設為 true 在展開文章時，自動收起側邊欄

coverImage

點開個人小卡片時的背景圖；在 config 中所有圖片都可以讀本地圖片 (通常放在 static/images 中)，或是一串遠端圖片網址；

建議把所有圖片都放到有做 CDN 的地方作為來源，網站載入速度才不會被拖慢。

favicon

瀏覽器 Tab 書籤上左側小圖案，目前遇到只有首頁有顯示，其他頁面都沒有的問題，尚未解決。

遇到過的問題

Firebase 的 Google Anaytics

Hugo 整合了 Googl Analytics 讓你可以直接配置你的 GA 碼，一步收工；一開始我曾嘗試把網站放到 firebase 上，因為他一併整合了 GA 不需要另外去創建:

讓我感到困惑的是下圖這 part 是否在架設 hugo 時也要做 (但我還是先照著 Firebase 說的去做):

總之我還是都跟著做，也確認瀏覽器讀出來的 js 都有那些原始碼，but:

我掛了兩三天還是一直處於上圖的情況，也就表示他一直抓不到，所以我就暫時先棄用 Firebase，如果有人逛到這知道問題在哪，歡迎留言分享一下。

後來我換到直接透過 Google Analytics 取得的資料去設置就可以了，無需額外設置，但可能要花點時間等 google 讀取(?)。

# config.toml
googleAnalytics = "UA-your-id"

之後會在花點篇幅介紹一下 Google Analytics 這部分。

變更設置 defaultMarkdownHandler

我們使用 Markdown 寫完文章時，有個東西叫 TOC (Table of Contents)，也就是文章目錄索引，我使用的佈景作者提供你透過:

<!-- toc -->

快速產生 TOC，這是很方便的功能，而此功能目前有 issue 需透過設置 defaultMarkdownHandler 為另一個 markdown 引擎暫時解決:

[markup]
  defaultMarkdownHandler = "blackfriday"

小結

今天介紹了我自己有調整測試過的配置參數，與配置說明，有問題或有任何講錯的部分歡迎留言跟我說。

參考連結

• Hugo Host on Firebase
• Create Your Free Developer Blog Using Hugo And Firebase
• kakawait/hugo-tranquilpeak-theme config.toml